<template>
	<!-- <view class="main-class"> -->
	<z-paging ref="paging" v-model="orderData" @query="queryList" class="order-container">
		<template #top>	
			<tn-sticky>
				<view class="header-class">
					<view class="status_bar" style="height: var(--status-bar-height); width: 100%;"></view>			
					<tn-navbar height="45px" home-icon="" :bottom-shadow="false" bg-color="tn-type-primary_bg" text-color="tn-white">我的订单</tn-navbar>
					<view class="search-box-wrapper">
						<tn-search-box
							v-model="searchValue"
							@input="searchInputEvent"
							@search="searchBtnClickEventPage"
							size="sm"
							placeholder="搜索关键词,检索客户"
							placeholder-icon="search"
							border-color="#FFFFFF"
							text-color="#FFFFFF"
							placeholder-color="#FFFFFF"
							class="search-box"
							:search-button-bg-color="mainClolr"
							shape="round"
						/>
					</view>
				</view>
				<view class="tabs-wrapper">
					<tn-tabs
						v-model="currentTabsIndex"
						bg-color="#FFFFFF"
						color="#666666"
						active-color="#000000"
						bar-color="#6babf3"
						height="70rpx"
						font-size="32"
						bar-width="60"
					>
						<tn-tabs-item
							v-for="(item, index) in statusData"
							:key="index"
							:title="item.text"
							@click="clickOrderPage(item)"
						/>
					</tn-tabs>
				</view>
				<view class="date-range tn-p tn-text-xl tn-white_bg" @click="openCalendarPopup">
					<view class="date-picker-title">
						<tn-icon name="calendar" size="32" color="#666666"></tn-icon>
						<text class="picker-text">时间选择</text>
					</view>
					<text class="date-text">{{dataInfo.startDate}} 至 {{dataInfo.endDate}}</text>
				</view>
			</tn-sticky>
		</template>
		<view class="order-list">
			<view class="order-item" v-for="item in orderData" :key="item.billcode">
				<view class="order-header" @click="toNavigate(item)">
					<view class="business-name tn-text-ellipsis-2">
						{{item.businessname}}
					</view>
					<view class="order-status">
						{{item.orderstate}}
					</view>	
				</view>
				<view class="order-info" @click="toNavigate(item)">
					<view class="bill-code">
						{{item.billcode}}
					</view>	
					<view class="order-date">
						{{item.dates}}
					</view>
				</view>
				<view class="order-summary" @click="toNavigate(item)">
					<view class="variety-count">
						品种数：<text class="highlight-text">{{item.ordernum}}</text>
					</view>
					<view class="amount">
						金额：<text class="highlight-text">{{item.taxamount}}</text>
					</view>	
				</view>
				<view class="order-remark" v-if="item.remark" @click="toNavigate(item)">
					<text class="remark-label">备注：</text>
					<text class="remark-content">{{item.remark}}</text>
				</view>
				
				<view class="button-group">
					<view class="left-buttons">
						<tn-button class="action-button" size="sm" type="danger" v-if="item.billstate==0 || item.isclose=='N'" @click="onClickClose(item)">作废订单</tn-button>
					</view>
					<view class="right-buttons">
						<tn-button class="action-button" size="sm" type="success" v-if="item.billstate==2" @click="onClickPay(item)">订单支付</tn-button>
					</view>	
				</view>
				<view class="button-group" v-if="item.invoicestate">
					<view class="left-buttons">
						<tn-button class="action-button" size="sm" type="danger" v-if="item.invoicestate==1" @click="onClickInvoiceDown(item)">发票下载</tn-button>
					</view>
					<view class="right-buttons">
						<tn-button class="action-button" size="sm" type="success" v-if="item.invoicestate==2" @click="onClickInvoiceType(item)">申请发票</tn-button>
					</view>	
				</view>
			</view>
		</view>
	</z-paging>	
	<!-- </view> -->
	
	<!--  -->
	
	<tn-popup v-model="showCalendarPopup" open-direction="top" class="popup-class">
	  <!-- <view class="tn-pt"> -->
	    <tn-calendar v-model="selectDate" min-date="2024-01-01" mode="range" class="calendar-class tn-mt-xl tn-pt-xl"/>
	  <!-- </view> -->
	  
	  <view class="tn-mt tn-w-full tn-pb">
	    <tn-button
	      font-size="36"
	      custom-class="popup-calendar-button"
	      @click="closeCalendarPopupPage"
	    >
	      选择所选日期
	    </tn-button>
	  </view>
	</tn-popup>
	
	<tn-popup v-model="isShowInvoiceType" >
	    <view class="tn-p-lg popup-class">
			<view class="tn-p-sm tn-shadow tn-flex tn-border-bottom tn-gray-disabled_border">
				<view class="tn-w-3-4 " >
					发票属性
				</view>
			</view>
			<view class="tn-p-sm tn-shadow tn-flex">
				<tn-radio-group v-model="invoiceType">
					<!-- <tn-radio label="0">无</tn-radio> &nbsp;&nbsp;&nbsp;&nbsp; -->
					<tn-radio label="1">专票</tn-radio> &nbsp;&nbsp;&nbsp;&nbsp;
					<tn-radio label="2">普票</tn-radio>
				  </tn-radio-group>
			</view>
			
			<view class="tn-p-sm tn-shadow tn-flex tn-border-bottom tn-gray-disabled_border">
				<view class="tn-w-3-4" >
					备注
				</view>
			</view>
			<view class="tn-p-sm tn-shadow tn-flex">
				<tn-input
				    v-model="remark"
				    type="textarea"
				    placeholder="请输入备注"
				    height="180"
					:border = "false"
					confirm-type="done"
					:show-word-limit="true"
					:maxlength="200"
				  />
			</view>
			
			<view class="tn-pt-lg tn-flex justify-between">
				<view class="tn-w-1-3">
					<tn-button size="lg" type="danger" width="tn-w-1-3" @click="onClickInvoiceClose">取消</tn-button>
				</view>
				<view class="tn-w-1-3 tn-flex justify-end">
					<tn-button size="lg" type="success" width="tn-w-1-3" @click="onClickInvoiceSave">确定</tn-button>
				</view>	
			</view>
		</view>
	</tn-popup>
	
</template>

<script setup>
	import { ref,reactive,onMounted,nextTick  } from 'vue'
	import { postCall,postPay,postReturnPay ,downloadFile ,postWXPay } from '@/api/index.js'
	import { EventBus } from '@/mitt/EventBus.js';
	import { toastMessage } from '@/utils/toast.js'
	import { createParams } from '@/utils/utils.js'
	import md5 from "js-md5";
	import dayjs from "dayjs";
	import { v4 as uuidv4 } from 'uuid';
	import Big from 'big.js';
	import { Base64 } from 'js-base64';
	import {userAllDataStore} from '@/stores'
	const store = userAllDataStore();
	const mainClolr = ref(store.state.mainColor);
	const procName = "PROC_APP_DO_ORDER";
	const selectDate = ref('')
	const searchValue = ref("")
	const currentSwiperIndex = ref(1)
	let currentTabsIndex = ref(0)
	const userInfo = reactive({});
	let index = 0;
	const showCalendarPopup = ref(false)
	const paging = ref(null)
	let tabsItem = ref('');
	const payConfig = {};
	const tmepItem = reactive({});
	const isShowInvoiceType = ref(false)
	const remark = ref('');
	
	let invoiceType = ref('2');
	
	let pageInfo = {
		P_PAGE : 1 ,
		P_PAGESIZE : 10
	}
	
	const queryList = (pageNo, pageSize) =>{
		pageInfo.P_PAGE = pageNo;
		pageInfo.P_PAGESIZE = pageSize;
		let params = {};
		params["P_PROC_NAME"] = "PROC_APP_DO_ORDER";
		params["P_ACTION"] = index;
		params["P_CON"] = searchValue.value;
		postCall(Object.assign(Object.assign(params,createParams(dataInfo)),pageInfo)).then(res=>{
			if(res){
				if(res.code===200 || res.code===1000){
							   // Object.assign(orderData,res.data.DATASET);	   
							   // console.log(statusData);
							   paging.value.complete(res.data.DATASET);
				}
			}
		  
		}).catch(res =>{
			paging.value.complete(false);
		})
	}
	
	const searchBtnClickEventPage = () =>{
		paging.value.reload();
	}
	
	const closeCalendarPopupPage = () =>{
		showCalendarPopup.value = false
		console.log(selectDate.value);
		let date = {
						"startDate":dayjs(selectDate.value[0]).format('YYYY-MM-DD'),
						"endDate":dayjs(selectDate.value[1]).format('YYYY-MM-DD')
					}
		 Object.assign(dataInfo,date);
		 paging.value.reload();
	}
	
	const clickOrderPage = (val) =>{
		index = val.id;
		paging.value.reload();
	}
	
	
	
	const openCalendarPopup = () => {
	  showCalendarPopup.value = true
	}
	
	const beforeBack = () => {
	  return new Promise((resolve) => {
	    setTimeout(() => {
	      uni.redirectTo({
	      	url: '/pages/index/index'
	      });
		  return true;
	    }, 1000)
	  })
	}
	
	const closeCalendarPopup = () => {
	  showCalendarPopup.value = false
	  console.log(selectDate.value);
	  let date = {
	  				"startDate":dayjs(selectDate.value[0]).format('YYYY-MM-DD'),
	  				"endDate":dayjs(selectDate.value[1]).format('YYYY-MM-DD')
	  			}
	   Object.assign(dataInfo,date);
	   doGetOrder();
	}
	
	const onClickClose = (item) =>{
		console.log(item.tradeid)
		if(item.tradeid){
			onLineReturn(item.tradeid,item.taxamount);
			
		}else{
			let params = {};
			params["P_PROC_NAME"] = procName;
			params["P_ACTION"] = "CLOSE";
			params["P_BILLNO"] = item.billno;
			postCall(params).then(res=>{
				if(res){
					if(res.code===200){
						toastMessage("作废成功！");
						paging.value.reload(); 
					}
				}
			})
		}
		
	}
	
	const onClickInvoiceType = (item) =>{
		isShowInvoiceType.value = true;
		Object.assign(tmepItem,item);
	}
	
	const onClickInvoiceSave = () =>{
		console.log(tmepItem);
		let params = {};
		params["P_PROC_NAME"] = "PROC_APP_DO_INVOICE";
		params["P_ACTION"] = "SAVE";
		params["P_INVOICETYPE"] = invoiceType.value;
		params["P_BILLCODE"] = tmepItem.billcode;
		params["P_TAXAMOUNT"] = tmepItem.taxamount;
		params["P_REMARK"] = remark.value;
		params["P_CLIENTID"] = tmepItem.clientid;
		postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					isShowInvoiceType.value = false;
				}
			}
		})
		   
	}
	
	const onClickInvoiceClose = () =>{
		isShowInvoiceType.value = false;
	}
	
	const onClickInvoiceDown = (item) =>{
		console.log("URL="+Base64.encode(item.invoiceurl)+"&FILENAME="+Base64.encode(item.billcode+".pdf"));
		downloadFile("URL="+Base64.encode(item.invoiceurl)+"&FILENAME="+Base64.encode(item.billcode+".pdf")).then(res=>{
			console.log(res);
			if(res.statusCode===200){
				uni.downloadFile({
				  url: uni.getStorageSync("HTTP")+"/static/"+item.billcode+".pdf",
				  success: function (res) {
					  console.log(res)
				    var filePath = res.tempFilePath;
				    uni.openDocument({
				      filePath: filePath,
				      showMenu: true,
				      success: function (res) {
				        console.log('打开文档成功');
				      }
				    });
				  }
				});
			}
		})
	}
	
	const onClickPay = (item) =>{
		// onLineWXPay(item.paytype,item.guid,item.businessname,item.settleamt);
		weiXinPay(item);
	}
	
	const searchInputEvent = ()=>{
		
	}
	const searchBtnClickEvent = ()=>{
		
	}
	const dataInfo = reactive({"startDate":"2024-01-01","endDate":"2024-04-31"})
	let loginInfo = {};
	onMounted(()=>{
		loginInfo = uni.getStorageSync("LOGINUSER");
		// userInfo = ;
		getStateInfo();
		const firstDayOfMonth = dayjs().startOf('month');
		let date = {
						"startDate":firstDayOfMonth.format('YYYY-MM-DD'),
						"endDate":dayjs().format("YYYY-MM-DD")
					}
		Object.assign(dataInfo,date);
		
		Object.assign(userInfo,uni.getStorageSync('USERINFO'));
		// currentTabsIndex.value = "2";
	
		uni.getStorage({
		      key: 'order',
		      success: function (storageRes) {
		          // 假设 createParams 是一个同步函数，你可以直接传入 storageRes.data
					// currentTabsIndex = storageRes.data;
					currentTabsIndex.value = parseInt(storageRes.data) ;
					index = parseInt(storageRes.data);
		      },
		      fail: function (error) {
		          reject(error);
		      }
		  });
		// doGetOrder();
		doGetPayConfig();
	})
	 

	
	const statusData = reactive([])
	const getStateInfo = () =>{
		
		let params = {};
		params["P_PROC_NAME"] = "PROC_APP_DO_MY";
		params["P_ACTION"] = "STATE";
		postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					Object.assign(statusData,res.data.DATASET);	   
				}
			}
		})
		   
	}
	
	const clickOrder = (val) =>{
		index = val.id;
		// console.log(currentTabsIndex.value);
		doGetOrder();
	 //  uni.setStorageSync("order",val.id)	
	 //  uni.navigateTo({
		// url: val.path
	 //  });
	}
	const orderData = ref([]);
	
	
	
	const doGetOrder = (val) =>{
		
		console.log(currentTabsIndex.value);
		orderData.length = 0;
		let params = {};
		params["P_PROC_NAME"] = "PROC_APP_DO_ORDER";
		params["P_ACTION"] = index;
		postCall(Object.assign(params,createParams(dataInfo))).then(res=>{
			if(res){
				if(res.code===200){
							   Object.assign(orderData,res.data.DATASET);	   
							   // console.log(statusData);
				}
			}
		   
		})
	}
	
	let toNavigate = (val) =>{
		let tempOrderData  = [];
		let convertOrderData = [];
		let params = {};
		params["P_PROC_NAME"] = "PROC_APP_DO_ORDER";
		params["P_ACTION"] = "DETAIL";
		params["P_BILLNO"] = val.billno;
		postCall(params).then(res=>{
			if(res){
				if(res.code===200){
							   Object.assign(tempOrderData,res.data.DATASET);	   
							   // console.log(statusData);
							   const mergedData = tempOrderData.reduce((acc, cur) => {
							       const { billno,billcode, businessname,recemanname,address,recetelephone,caozyname,kdcode,body,accesstoken,remark,kdname, ...rest } = cur;
							       if (!acc[billcode]) {
							           acc[billcode] = { billno,billcode, businessname,recemanname,address,recetelephone,caozyname,kdcode,body,accesstoken,remark,kdname, details: [rest] };
							       } else {
							           acc[billcode].details.push(rest);
							       }
							       return acc;
							   }, {});
							   
							   const businessStats = {};
							   for (const key in mergedData) {
							       const business = mergedData[key];
							       const totalPrice = business.details.reduce((total, item) => new Big(total).plus(new Big(item.sumtaxamount)) , 0);
										mergedData[key]["taxamount"] = totalPrice;
								   }
							    for (const key in mergedData) {
							   	    if (Object.hasOwnProperty.call(mergedData, key)) {
									   console.log(22);
									   convertOrderData.push(mergedData[key]);
									}
							     }
								uni.setStorageSync("ORDERINFO",convertOrderData[0]) 
								uni.navigateTo({
									url: '/pages/order/orderdetails'
								})
				}
			}
		   
		})
	}
	
	let doGetPayConfig = async () =>{
		let params = {};
		params["P_PROC_NAME"] = "PROC_APP_DO_SHOPPING";
		params["P_ACTION"] = "PAYCONFIG";		
		await postCall(params).then(res=>{
			if(res){
				if(res.code===200){
					Object.assign(payConfig,res.data.DATASET[0]);
					console.log(payConfig);
				}
			}
			
		})
	}
	
	let onLineReturn = async (oldtrxid,trxamt) =>{
		let guid = uuidv4();
		let params = {};
		params.cusid = payConfig.cusid;
		params.appid = payConfig.appid;
		params.version = "11";
		params.reqsn = guid;
		params.trxamt = (trxamt*100).toString();
		params.oldtrxid = oldtrxid;
		params.randomstr = guid;
		params.signtype = payConfig.signtype;
		await postReturnPay(params).then(res=>{
			if(res){
				if(res.code===200){d
					if(res.data.errmsg){
						toastMessage(res.data.errmsg)
					}
					if(res.data.trxstatus){
						if(res.data.trxstatus=="0000"){
							toastMessage("作废成功！");
						}
					}
				}
			}
		})
	}
	
	let weiXinPay = async (item)=> { 
		let guid = uuidv4().replace(/-/g, '');
		let params = {};
		params["P_PROC_NAME"] = "PROC_APP_DO_ORDER";
		params["P_ACTION"] = "WXPAY";		
		params["P_PAYGUID"] = guid;	
		await postCall(Object.assign(params,createParams(item))).then(res=>{
			if(res){
				if(res.code===200){
					let payParams = {};
					payParams.order_no = guid;
					console.log("===========",item)
					payParams.amount = parseFloat(new Big(item.settleamt).times(100)).toString();
					console.log("===========",payParams)
					postWXPay(payParams).then(res=>{
						if(res.code===200){
							console.log(res.data.appid);
							uni.requestPayment({
									"provider": "wxpay",
									"orderInfo": {
									        "appid": res.data.appid,  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
									        "noncestr": res.data.nonceStr, // 随机字符串
									        "package": "Sign=WXPay",        // 固定值
									        "partnerid": res.data.partnerId,      // 微信支付商户号
									        "prepayid": res.data.prepayId, // 统一下单订单号
									        "timestamp": res.data.timestamp,    // 时间戳（单位：秒）
									        "sign": res.data.sign // 签名，这里用的 MD5/RSA 签名
									    },
									success(res) {
										paging.value.reload();
									},
									fail(e) { 
										console.log(e);
									}	
								    
							})	
						
						}
					})
				}
			}
			
		})		
	}
	
	let onLineWXPay = (peyTypeValue,uuid,businessname,taxamount) =>{
		let params = {};
		params.cusid = payConfig.cusid;
		params.appid = payConfig.appid;
		params.version = payConfig.version;
		params.trxamt = parseFloat(new Big(taxamount).times(100)).toString(); // (shopClientInfoData.taxamount*100).toString();
		params.reqsn = uuid;
		params.notify_url = payConfig.notifyurl;
		params.body = businessname;
		params.remark = userInfo.staffid;
		if(peyTypeValue == 1){
			params.paytype = "W06";
		}else if(peyTypeValue == 2){
			params.paytype = "A02";
		}
		
		params.randomstr = uuid;
		params.signtype = payConfig.signtype;
		postPay(params).then(res=>{
			console.log(res);
			if(res){
				if(res.code===200){
					params.sign = res.data;
					console.log(params);
					var queryParams = [];
					for (var key in params) {
					  if (params.hasOwnProperty(key)) {
					    // var value = encodeURIComponent(params[key]);
						var value = params[key];
					    queryParams.push(key + "=" + value);
					  }
					}
					if(peyTypeValue==1){
						plus.share.getServices(res=>{
							let sweixin = '';
							for (var i = 0; i < res.length; i++) {
								let t = res[i];
								if (t.id == 'weixin') {
								  sweixin = t;
								}
							}
							console.log(sweixin)
							if(sweixin){
								sweixin.launchMiniProgram(
									{
										id: 'gh_e64a1a89a0ad',  // 要跳转小程序的原始ID
										path: 'pages/orderDetail/orderDetail'+"?"+queryParams.join("&"),  //  可带参数
										type: 0   // 微信小程序版本类型可取值： 0-正式版； 1-测试版； 2-体验版。 默认值为0。
									},
									// 目标小程序点击返回App后执行的回调，在此接收微信小程序传递的参数
									res2 => {
										console.log(typeof res2, res2)
										// res2是微信小程序传递回来的参数 类型为string 需转化为js对象使用
										let result = JSON.parse(res2)
										console.log(result) 
										// 拿到参数后执行你需要的逻辑    
										// ......   
									},
									  err2 => {
										console.log(err2)
									  }
									);
							}
						})
					} 
					if(peyTypeValue==2){
						 
						 let alipayUrl = null;
						 
						 if (uni.getSystemInfoSync().platform == "ios") {
							alipayUrl = 'alipay://platformapi/startapp?appId=2021001104615521';
						 }else{
							alipayUrl = 'alipays://platformapi/startapp?appId=2021001104615521';
						 }
						
						//alipayUrl 已经有? 问号了，所以这里需要进行编码
						// let params = encodeURIComponent('?'+queryParams.join("&"))
						const query = encodeURIComponent("payinfo=" + encodeURIComponent(JSON.stringify(params)));
						console.log(query);
						
						// page=pages/index/index  跳转到支付宝小程序页面的页面路径
						alipayUrl  = `${alipayUrl}&page=pages/orderDetail/orderDetail&thirdPartSchema=&query=${query}`
						console.log(alipayUrl);
						//唤起支付宝
						plus.runtime.openURL(alipayUrl);
						// window.location.href = alipayUrl;
					   //&thirdPartSchema=&query=${query}
						/*
						uni.navigateToAlipayMiniProgram({
						  appId: '2021001104615521',
						  path: `pages/orderDetail/orderDetail`, // 要打开的小程序页面路径
						  success: function() {
						    console.log('跳转到支付宝小程序成功');
						  },
						  fail: function(error) {
						    console.error('跳转到支付宝小程序失败', error);
						  }
						});
						*/
					}
				}else{
					toastMessage(res.msg);
				}
			}
			
		})
	}
	
</script>

<style>
.order-container {
  background-color: #f5f7fa;
}

.header-class {
  background: var(--tn-color-primary);
  padding-bottom: 15rpx;
}

.search-box-wrapper {
  padding: 20rpx 30rpx;
}

.search-box {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 40rpx;
}

.tabs-wrapper {
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
  margin-top: -10rpx;
}

.date-range {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 30rpx;
	background: #fff;
	border-bottom: 2rpx solid #f0f0f0;
}

.date-picker-title {
	display: flex;
	align-items: center;
}

.picker-text {
	margin-left: 12rpx;
	font-size: 32rpx;
	color: #333;
	font-weight: 500;
}

.date-text {
	color: #666;
	font-size: 28rpx;
}

.order-list {
  padding: 20rpx;
}

.order-item {
  background: #fff;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;
  border-bottom: 2rpx solid #f0f0f0;
}

.business-name {
  flex: 1;
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  padding-right: 20rpx;
}

.order-status {
  font-size: 28rpx;
  color: var(--tn-color-primary);
  font-weight: bold;
}

.order-info {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  font-size: 28rpx;
}

.bill-code {
  color: #666;
}

.order-date {
  color: #999;
}

.order-summary {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  border-top: 2rpx solid #f0f0f0;
  font-size: 28rpx;
}

.highlight-text {
  color: #ff6b6b;
  font-weight: 500;
  margin-left: 8rpx;
}

.order-remark {
  padding: 20rpx 0;
  font-size: 28rpx;
  color: #666;
  border-top: 2rpx solid #f0f0f0;
}

.remark-label {
  color: #999;
}

.remark-content {
  color: #666;
}

.button-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20rpx;
  border-top: 2rpx solid #f0f0f0;
}

.action-button {
  min-width: 160rpx;
  margin: 0 10rpx;
}

.right-buttons {
  display: flex;
  justify-content: flex-end;
}

.popup-calendar-button {
  margin: 0 30rpx;
  width: calc(100% - 60rpx) !important;
  padding: 20rpx 30rpx !important;
}

.popup-class {
  border-radius: 20rpx 20rpx 0 0;
  overflow: hidden;
}

.calendar-class {
  height: 100% !important;
  margin-top: 30rpx;
}
</style>
